import React from "react";

import {LoginOutlined, SettingOutlined} from '@ant-design/icons';
import {Avatar, Badge, Col, Dropdown, Menu, Row, Tooltip, Typography} from 'antd';
import {Link} from "react-router-dom";

import BaseComponent from "../../../redare/components/BaseComponent";
import WebWorkbenchPresenter from "../../../.gen/presenter/WebWorkbenchPresenter";
import {saveStorage} from "../../../common/StorageUtils";

const {Text} = Typography;

export default class Header extends BaseComponent {


    constructor(props) {
        super(props);
        this.state = {
            userInfo: {}
        };
        this.workbenchPresenter = new WebWorkbenchPresenter(this);
    }

    componentDidMount() {
        this.getCurLoginInfo()
    }

    getCurLoginInfo() {
        this.workbenchPresenter.getLoginUser(
            {},
            (info) => {
                let {data} = info;
                this.setState({userInfo: data})
                saveStorage("userId", data.id);
            }
        )
    }

    loginOut() {
        this.workbenchPresenter.loginOut(
            {},
            () => {
                window.location.reload();
            },
            (f) => {

            }
        );
    }

    render() {
        let {userInfo} = this.state;
        return (
            <Row gutter={24} type="flex" justify="space-between" className="container">
                <Col>

                </Col>
                <Col>
                    <Row gutter={24} justify="end" align="middle">
                        <Col>
                            <Tooltip title="用户手册">
                                <a className="iconfont iconyonghushouce"
                                   style={{color: 'rgba(0, 0, 0, 0.85)', fontSize: '14px'}}
                                   onClick={() => this.showManual()}/>
                            </Tooltip>
                        </Col>
                        <Col>
                            <Dropdown placement="bottomLeft" overlay={
                                <Menu className="use-menu">
                                    {/*<Menu.Item key="0">
                                        <Link to=""><UserOutlined/>基础信息</Link>
                                    </Menu.Item>*/}
                                    <Menu.Item key="1">
                                        <Link to="/setting/personal"><SettingOutlined/>个人设置</Link>
                                    </Menu.Item>
                                    <Menu.Divider/>
                                    <Menu.Item key="2" onClick={this.loginOut.bind(this)}>
                                        <LoginOutlined/>
                                        <span>退出登录</span>
                                    </Menu.Item>
                                </Menu>
                            }>
                                <Text className="avatar-box">
                                    <Badge>
                                        <Avatar size="small"
                                                src={userInfo.photo}/><Text
                                        className="padding-left05">{userInfo.name}</Text>
                                    </Badge>
                                </Text>
                            </Dropdown>
                        </Col>
                    </Row>
                </Col>
            </Row>
        );
    }


}